<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>jquery</title>
		<script src="js/jquery1.10.2.min.js"></script>
	</head>

	<body>
		<h1>jquery</h1>
		<h3>제이쿼리 개요</h3>
		<p>자바스크립트 사용을 좀 더 쉽게 해주는 라이브러리</p>
		<p>제이쿼리는 '적게 작성해도 많은 일을 하는'
			경량급lightweight 자바스크립트 라이브러리임 </p>
		<p>제이쿼리를 사용하려면 적어도 
				html, css, javascript는 조금이라도 알아야 함</p>
		<p>html/dom 조작, css 조작, html 이벤트 처리,
			효과와 애니메이션 처리, Ajax, 
			기타 유용한 도구등으로 구성</p>
		
		<h3>설치 및 테스트</h3>
		<p>jquery.com 에서 라이브러리를 내려받은 후
			script 태그에 등록하면 됨</p>
		
		<h3>기본 사용법</h3>
		<p>$( 선택자 ).액션()</p>
		<p>$ 기호를 사용함으로써 jquery 구문을 나타냄</p>
		<p>$( "태그명" ) : 문서 내 모든 태그를 가리킴</p>
		<p>$( ".클래스명" ) : 문서 내 모든 클래스를 가리킴 </p>
		<p>$( "#id명" ) : 문서 내 id로 부여된 요소를 가리킴</p>
		<p>$( this ) : 현재 요소를 가리킴</p>
		<p>모든 제이쿼리 액션은 ready 이벤트 
						블록내에 작성해야 함 <br /> 
			즉, $(document).ready( 
							function() { 코드... } ); 
			형식을 사용한다는 말임</p>
		<p>이렇게 하는 이유는 문서가 모두 읽어지기 전에
			스크립트가 먼저 실행하는 것을 방지하기 위함</p>
		<p>위 코드를 줄여서 $(function() { 코드... });
				형식으로 사용해도 가능</p>
		
		<hr />
		<h2 class="gold"> </h2>
		<p id="txt" class="gold"> </p>
				
		<script type="text/javascript">
			$("h2").html("제이쿼리로 추가한 문구입니다~");
			$("h2").css("color", "red")
						  .css("font-style", "italic");
			$("#txt").html("시간은 금이라구, 친구!!");
			$(".gold").css( "text-decoration", "underline" );
		</script>
		
		<hr />
		<h3>이벤트 처리</h3>
		<p>$( 선택자 ).이벤트명( function() { } );</p>
		
		<hr />
		<button type="button">제이쿼리 이벤트</button>
		
		<script type="text/javascript">
			$( 
				$( "button" ).click( 
					function() { alert( "시간은 금이라구~ 친구!" ); } 
				)
			 );
		</script>
		
		<hr />
		<h3>효과와 애니메이션</h3>
		<p>hide(지연시간) : 선택한 객체를 사라지게 함</p>
		<p>show(지연시간) : 선택한 객체를 나타나게 함</p>
		<p>fadeIn(지연시간) : 선택한 객체를 천천히 나타나게 함</p>
		<p>fadeOut(지연시간) : 선택한 객체를 천천히 사라지게 함</p>
		
		<hr />
		
		<div id="box1" 
		style="width:250px; height:100px; 
		background: red; color: white; 
		font-weight: bold; font-size: 1.5em;
		text-align:center; padding-top:85px">
		곧 신기한 마술이 벌어집니다~!</div>
		
		<button type="button" id="btn01">
				사라져~</button>
		<button type="button" id="btn02">
				나타나~</button>
				
		<button type="button" id="btn03">
				또 사라져~</button>
		<button type="button" id="btn04">
				또 나타나~</button>		
		
		<script type="text/javascript">
			$( $("#btn01").click( 
					function() { $("#box1").hide(); } ) );
			$( $("#btn02").click( 
					function() { $("#box1").show(); } ) );	
					
			$( $("#btn03").click( 
					function() { $("#box1").fadeOut(2000); } ) );
			$( $("#btn04").click( 
					function() { $("#box1").fadeIn(2000); } ) );	
		</script>				
		
		
		
		
		
		
	</body>
</html>
